<template>
  <div class="test-container">
    <!-- 基础用法，使用默认宽度 -->
    <div class="example-item">
      <WordExtra word="术语" extraContent="这是该术语的详细解释，提供更多信息。" />
    </div>

    <!-- 传入自定义宽度 -->
    <div class="example-item">
      <WordExtra word="术语2" width="300px">
        <div>
          <strong>复杂解释：</strong>
          <p>这里可以包含任意HTML或组件内容，比如链接、图片等。</p>
          <a href="https://example.com" target="_blank">点击了解更多</a>
        </div>
      </WordExtra>
    </div>
  </div>
</template>

<script>
import WordExtra from '@/components/link/WordExtra.vue'

export default {
  components: { WordExtra }
}
</script>

<style scoped>
.test-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.example-item {
  margin-bottom: 20px;
}
</style>
